<script setup name="SubmitCompany">
import { onMounted, reactive } from 'vue'

import Message from 'vue-m-message'
import { ElMessageBox } from 'element-plus'
import information from '@/api/publicInformation/index.js'
import { tableCheckChane } from '@/utils/index.js'

const updateVisible = ref(false)
const updateDialogTitle = ref('')
const ids = ref([])
const updateForm = ref([])
const tableData = ref([])
const queryParam = ref({})
const pagerConfig = ref({
  total: 0,
  currentPage: 1,
  pageSize: 10,
})
const searchConfig = reactive([
  {
    label: '递交公司名称',
    field: 'submitcompanyName',
    type: 'input',
  },
])
const tableColumn = reactive([
  {
    type: 'checkbox',
    width: 50,
    align: 'center',
  },
  {
    type: 'seq',
    width: 50,
    align: 'center',
  },
  {
    field: 'submitcompanyName',
    title: '递交公司名称',
    align: 'center',
  },
  {
    field: 'remark',
    title: '备注',
    align: 'center',
    showOverflow: 'tooltip',
  },
  {
    field: 'action',
    title: '操作',
    align: 'center',
    slots: {
      default: 'actions',
    },
  },

])
const updateFormList = reactive([
  {
    field: 'submitcompanyName',
    label: '递交公司名称',
    type: 'input',
    span: 24,
  },
  {
    field: 'remark',
    label: '备注',
    type: 'input',
    span: 24,
  },
])
onMounted(() => {
  getList()
})
function getList() {
  const params = {
    ...queryParam.value,
    pageNum: pagerConfig.value.currentPage,
    pageSize: pagerConfig.value.pageSize,
  }
  information.listSubmit(params).then((res) => {
    if (res.code === 200) {
      tableData.value = res.rows
    }
    pagerConfig.value.total = res.total
  })
}

function handleCheckChange(data) {
  ids.value = tableCheckChane(data, 'submitcompanyId', ids.value)
}
function handlePageChange({ currentPage, pageSize }) {
  pagerConfig.value.currentPage = currentPage
  pagerConfig.value.pageSize = pageSize
  getList()
}

function handleSearch(params) {
  queryParam.value = params
  pagerConfig.value.currentPage = 1
  getList()
}

function rest() {
  updateForm.value = {
    subjectcontractName: '',
    remark: '',

  }
}

// 新增
function handleAdd() {
  rest()
  updateVisible.value = true
  updateDialogTitle.value = '新增'
}

function updateClose() {
  updateVisible.value = false
}
// 修改
function handleUpdate(row) {
  rest()
  const submitcompanyId = row.submitcompanyId
  information.viewSubmit(submitcompanyId).then((res) => {
    if (res.code === 200) {
      updateForm.value = res.data
      updateVisible.value = true
      updateDialogTitle.value = '修改'
    }
  })
}
// 提交
function allotSubmitForm() {
  if (updateForm.value.submitcompanyId != null) {
    information.updateSubmit(updateForm.value).then((res) => {
      if (res.code === 200) {
        Message.success('修改成功')
        updateVisible.value = false
        getList()
      }
    })
  }
  else {
    information.addSubmit(updateForm.value).then((res) => {
      if (res.code === 200) {
        Message.success('新增成功')
        updateVisible.value = false
        getList()
      }
    })
  }
}

// 删除
function handleDelete(row) {
  const submitcompanyId = row?.submitcompanyId || ids.value

  ElMessageBox.confirm(
    '是否确认删除?',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(() => {
      information.deleteSubmit(submitcompanyId).then((res) => {
        if (res.code === 200) {
          Message.success('删除成功')
          getList()
          ids.value = []
        }
      })
    })
    .catch(() => {

    })
}
</script>

<template>
  <div class="app-container">
    <el-card shadow="never" class="">
      <SearchBar :search-config="searchConfig" @search="handleSearch" />
    </el-card>
    <el-card shadow="never" class="mt-2">
      <Toolbar>
        <el-button
          v-hasPermi="['system:subjectContract:add']"
          type="primary"
          class="el-gradient-primary"
          @click="handleAdd"
        >
          新增
          <el-icon class="el-icon--right">
            <CirclePlusFilled />
          </el-icon>
        </el-button>
        <el-button
          v-hasPermi="['system:subjectContract:remove']"
          type="danger"
          class="el-gradient-danger"
          :disabled="ids.length === 0"
          @click="handleDelete(null)"
        >
          删除
          <el-icon class="el-icon--right">
            <Delete />
          </el-icon>
        </el-button>

        <el-button
          v-hasPermi="['system:subjectContract:export']"
          type="warning"
          class="el-gradient-warning"
          @click="handleExport()"
        >
          导出
          <el-icon class="el-icon--right">
            <FolderAdd />
          </el-icon>
        </el-button>
      </Toolbar>
      <vxe-grid
        :row-config="{
          keyField: 'submitcompanyId',
        }"
        :data="tableData"
        :columns="tableColumn"
        :pager-config="pagerConfig"
        header-cell-class-name="headerCellClass"
        @page-change="handlePageChange"
        @checkbox-all="handleCheckChange"
        @checkbox-change="handleCheckChange"
      >
        <template #actions="{ row }">
          <el-button
            v-hasPermi="['system:subjectContract:edit']"
            size="small"
            text
            type="primary"
            @click="handleUpdate(row, 'update')"
          >
            修改
          </el-button>
          <el-button
            v-hasPermi="['system:subjectContract:remove']"
            size="small"
            text
            type="danger"
            @click="handleDelete(row)"
          >
            删除
          </el-button>
        </template>
      </vxe-grid>
    </el-card>

    <!-- 修改 -->
    <el-dialog
      v-model="updateVisible" :destroy-on-close="true" class="custom-dialog" width="500px"
      @close="updateClose"
    >
      <template #header>
        <div class="dialog-header">
          <span class="relative top-3 text-[16px]">
            {{ updateDialogTitle }}
          </span>
        </div>
      </template>
      <BaseForm
        :field-list="updateFormList"
        :model="updateForm"
        class="px-5"
        :options="{ labelWidth: '120px' }"
        @submit="allotSubmitForm"
        @cancel="updateClose"
      />
    </el-dialog>
  </div>
</template>
